<template>
  <div class="wf-box">
    <canvas id="canvas" width="600" height="300">当前浏览器不支持</canvas>
    <div class="wf-selector-right">
      <el-select v-model="value" class="wf-selector" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button>导出</el-button>
    </div>
      
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          value: "1",
          label: "天",
        },
        {
          value: "2",
          label: "周",
        },
        {
          value: "3",
          label: "月",
        },
      ],
      value: "1",
    };
  },
  mounted() {
    let canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgba(0, 0, 0, 1)";
    ctx.font = "20px 宋体";
    ctx.fillText("订单数量—", 240, 40); //填充
    ctx.beginPath();
    ctx.moveTo(60, 50);
    ctx.lineTo(60, 250);
    ctx.lineTo(560, 250);
    ctx.stroke();

    ctx.font = "20px 宋体";
    ctx.fillText("2020-02", 90, 280); //填充
    ctx.fillText("2020-03", 180, 280); //填充
    ctx.fillText("2020-04", 270, 280); //填充
    ctx.fillText("2020-05",360, 280); //填充
    ctx.fillText("2020-06",450, 280); //填充


    
    ctx.font = "20px 宋体";
    ctx.fillText("200", 20, 220); //填充
    ctx.fillText("400", 20, 180); //填充
    ctx.fillText("600", 20, 140); //填充
    ctx.fillText("800",20, 100); //填充
    ctx.beginPath();
    ctx.moveTo(135, 120);
    ctx.lineTo(135+90, 140);
    ctx.lineTo(135+180, 80);
    ctx.lineTo(135+270, 200);
    ctx.lineTo(135+360, 140);
    ctx.stroke();

  },
};
</script>
<style lang="scss" scoped>
.wf-box {
  width: 600px;
  height: 300px;
  margin: 100px auto;
  position: relative;

  #canvas {
    background-color: rgb(255, 255, 255);
  }

  .wf-selector-right {
    width: 140px;
    position: absolute;
    right: 40px;
    top:10px;

    .wf-selector {
      width: 60px;
      margin-right: 10px;
    }
  }
}
</style>